body{
    background-color: #000;
    overflow: hidden;
}
.www{
    width:400px;
    height:400px;
    border-radius: 400px 0 400px 0;
}
.opacity{
    opacity:0.5;
}
.bigbox{
    position: absolute;
    top:50px;
    left:50%;
    .www;
    transform: rotate(-45deg) translateX(-50%);
    div{
        .www;
        // background-color: #fdbfc9;
        background-image: linear-gradient(45deg,#fff 2%,rgb(235, 111, 132)  60%);
        transform-origin: left bottom;
        transition:all 1s;
        position: absolute;
        top: 0;
        left: 0;
    }
    &:hover .box1{
        transform: rotate(-90deg);
        .opacity;
    }
    &:hover .box2{
        transform: rotate(-60deg);
        .opacity;
    }
    &:hover .box3{
        transform: rotate(-30deg);
        .opacity;
    }
    &:hover .box4{
        transform: rotate(0deg);
        .opacity;
    }
    &:hover .box5{
        transform: rotate(30deg);
        .opacity;
    }
    &:hover .box6{
        transform: rotate(60deg);
        .opacity;
    }
    &:hover .box7{
        transform: rotate(90deg);
        .opacity;
    }
    .title{
        // width: 400px;
        height: 50px;
        background-color: red;
        color: #fff;
        font-size: 50px;
        text-align: center;
        line-height: 50px;
        position: absolute;
        top: 58%;
        left: 33%;
        transform: rotate(45deg) translate(-50%,-50%);
        background-image:none;
        border-radius: 0;
        display: none;
    }
}